@import '../../../styles/var';

@select: ~'@{prefix}-select';

.@{select}-option {
  cursor: pointer;
  padding: 5px 10px;
  color: @font-color;

  &:hover:not(.is-disabled) {
    color: @primary-color;
    background-color: @primary-background;
  }

  &.is-active {
    background-color: @primary-background;
  }

  &.is-selected {
    color: @primary-color;
  }

  &.is-disabled {
    opacity: 0.5;
    cursor: default;
  }
}

.@{select}-option-empty {
  .@{prefix}-alert {
    padding-left: 30px;
    padding-right: 10px;
  }
}

.@{select}-multiple-dropdown {
  .@{select}-option {
    padding-right: 30px;

    &:before {
      right: 10px;
      top: 50%;
      position: absolute;
      opacity: 0;
      box-sizing: border-box;
      width: @check-width;
      height: @check-height;
      content: '';
      display: block;
      border: 2px solid @primary-color;
      border-top: none;
      border-left: none;
      transform: translate(0, -50%) rotate(45deg) scale(0);
      transition: transform @normal-motion @ease-out-backward;
    }

    &.is-selected {
      position: relative;

      &:before {
        transform: translate(0, -50%) rotate(45deg) scale(1);
        opacity: 1;
      }
    }
  }
}
